<!--
 * Description: SupplyCloud主页面
 * Company: 联宝（合肥）电子科技有限公司
 * Author: Dongxu.Ni
 * Date: 2020/04/14 02:52
-->

<template>
  <BaseWrap>
    <div class="base-func">
      <!-- 查询按钮 -->
      <div class="func-top">
        <div class="btn-left">
          <el-form class="demo-form-inline" :inline="true" :model="queryForm">
            <el-form-item label="年份">
              <el-date-picker
                v-model="yearData"
                format="yyyy"
                placeholder="选择年份"
                style="width:160px;height:30px"
                type="year"
              ></el-date-picker>
            </el-form-item>
            <el-form-item v-if="this.dataType == 'monthlyReport' ? true : false" label="月份">
              <el-select
                v-model="mouthData"
                class="top-input"
                clearable
                filterable
                placeholder="选择月份"
                size="small"
                style="width:160px;height:30px"
                @change="handleChange"
              >
                <el-option
                  v-for="item in mouth"
                  :key="item.index"
                  :label="item.label"
                  :value="item.value"
                />
              </el-select>
            </el-form-item>
            <el-form-item v-else label="季度">
              <el-select
                v-model="quarterlyData"
                class="top-input"
                clearable
                filterable
                placeholder="选择季度"
                size="small"
                style="width:160px;height:30px"
              >
                <el-option
                  v-for="item in quarterly"
                  :key="item.index"
                  :label="item"
                  :value="item"
                />
              </el-select>
            </el-form-item>
            <el-form-item>
              <el-button size="mini" type="primary" @click="reportQuery">查询</el-button>
            </el-form-item>
          </el-form>
        </div>
        <div class="btn-right">
          <el-radio-group v-model="dataType" size="mini">
            <el-radio-button label="monthlyReport">月度报表</el-radio-button>
            <el-radio-button label="quarterlyReport">季度报表</el-radio-button>
          </el-radio-group>
        </div>
      </div>
    </div>

    <!--报价commodity数据表格-->
    <BaseTable
      :is-requesting="isRequesting"
      :page-number.sync="pageNumber"
      :page-size.sync="pageSize"
      :table-data="tableData"
      :total="total"
    >
      <template slot="header">
        <!--序号列-->
        <el-table-column align="center" fixed :label="$t('table.NO')" min-width="50px">
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>
      </template>

      <template>
        <!--fy-->
        <el-table-column
          align="center"
          label="FY"
          min-width="100px"
          prop="fy"
          :sort-method="$sortByLower"
        />
        <!--Quarter-->
        <el-table-column align="center" label="Quarter" min-width="100px" prop="quarter" />
        <!--Month-->
        <el-table-column align="center" label="Month" min-width="100px" prop="month" />
        <!--souringType-->
        <el-table-column align="center" label="Souring Type" min-width="150px" prop="souringType" />
        <!--Tower-->
        <el-table-column align="center" label="Tower" min-width="100px" prop="tower" />
        <!--Commodity-->
        <el-table-column
          align="center"
          label="Commodity"
          min-width="150px"
          prop="commodity"
        ></el-table-column>
        <!--location-->
        <el-table-column align="center" label="Location" min-width="200px" prop="location" />
        <!--plant-->
        <el-table-column align="center" label="Plant" min-width="200px" prop="plant" />
        <!--PN Group-->
        <el-table-column align="center" label="PN Group" min-width="200px" prop="pnGroup" />
        <!--Sourcer Code-->
        <el-table-column align="center" label="Sourcer Code" min-width="200px" prop="sourcerCode" />
        <!--Vendor-->
        <el-table-column align="center" label="Vendor" min-width="200px" prop="vendor" />
        <!--Vendor-->
        <el-table-column align="center" label="Vendor Name" min-width="200px" prop="vendorName" />
        <!--vendorAbbreviation-->
        <el-table-column
          align="center"
          label="Vendor abbreviation"
          min-width="200px"
          prop="vendorAbbreviation"
        />
        <!--Country-->
        <el-table-column align="center" label="Country" min-width="200px" prop="country" />
        <!--City-->
        <el-table-column align="center" label="City" min-width="200px" prop="city" />
        <!--PN-->
        <el-table-column align="center" label="PN" min-width="200px" prop="pn" />
        <!--GR(quantity)-->
        <el-table-column
          align="center"
          label="GR(quantity)"
          min-width="200px"
          prop="gr"
          sortable
          :v-if="this.dataType === 'quarterlyReport' ? true : false"
        />
        <!--Price-->
        <el-table-column align="center" label="Price" min-width="200px" prop="price" sortable />
        <!--Base Price-->
        <el-table-column
          align="center"
          label="Base Price"
          min-width="200px"
          prop="basePrice"
          sortable
        />
        <!--Base Price-->
        <el-table-column
          align="center"
          label="Spending(amount)"
          min-width="200px"
          prop="Spending "
          sortable
          :v-if="this.dataType === 'monthlyReport' ? true : false"
        />
        <!--B/Spending-->
        <el-table-column
          align="center"
          label="B/Spending"
          min-width="200px"
          prop="price"
          sortable
        />
        <!--Price-->
        <el-table-column
          align="center"
          label="In-tape Saving"
          min-width="200px"
          prop="price"
          sortable
        />
        <!--Price-->
        <el-table-column
          align="center"
          label="In-tape Saving Rate"
          min-width="200px"
          prop="price"
          sortable
        />
        <!--updater 更新者-->
        <!-- <el-table-column
          align="center"
          :label="$t('SupplyCloud.updater')"
          min-width="200px"
          prop="updater"
          sortable
        >
          <template slot-scope="scope">
            <span>
              {{ $store.getters['user/getUserNameById'](scope.row.updater) || $t('result.none') }}
            </span>
          </template>
        </el-table-column> -->
      </template>

      <!-- 右浮动 -->
      <!-- <template slot="end"> -->
      <!--操作列-->
      <!-- <el-table-column
          align="center"
          fixed="right"
          :label="$t('table.operate')"
          min-width="150px"
        >
          <template slot-scope="scope">
            <el-button v-if="$hasPer('edit')" type="text" size="mini" @click="rowEdit(scope.$index, scope.row)">
              {{ $t('button.edit') }}
            </el-button>
            <el-button
              v-if="$hasPer('delete')"
              size="mini"
              type="text"
              @click="rowDelete(scope.$index, scope.row)"
            >
              <i class="el-icon-delete el-icon--right"></i>
              {{ $t('button.delete') }}
            </el-button>
          </template>
        </el-table-column>
      </template> -->
    </BaseTable>
  </BaseWrap>
</template>

<script>
import { reportMonth, reportQuarter } from '@/api/spendingSaving/reportForm'
// import QuarterPriceAdd from './components/QuarterPriceAdd'
// import QuarterPriceEdit from './components/QuarterPriceEdit'

export default {
  name: 'QuarterPriceGR',
  //   components: { QuarterPriceAdd, QuarterPriceEdit },
  props: {},
  data() {
    return {
      // 正在查询
      isRequesting: false,
      // 高级查询选项抽屉弹出标识
      advanceOptionDrawer: false,
      // 页码
      pageNumber: 1,
      // 页展示行数
      pageSize: 10,
      // 总行数
      total: 0,
      // 表格数据
      tableData: [],
      queryForm: {},
      mouth: [
        {
          value: '1',
          label: '一月'
        },
        {
          value: '2',
          label: '二月'
        },
        {
          value: '3',
          label: '三月'
        },
        {
          value: '4',
          label: '四月'
        },
        {
          value: '5',
          label: '五月'
        },
        {
          value: '6',
          label: '六月'
        },
        {
          value: '7',
          label: '七月'
        },
        {
          value: '8',
          label: '八月'
        },
        {
          value: '9',
          label: '九月'
        },
        {
          value: '10',
          label: '十月'
        },
        {
          value: '11',
          label: '十一月'
        },
        {
          value: '12',
          label: '十二月'
        }
      ],
      quarterly: {
        1: 'Q1',
        2: 'Q2',
        3: 'Q3',
        4: 'Q4'
      },
      // 查询表单对象
      yearData: '',
      mouthData: '',
      selectVal: '',
      quarterlyData: '',
      dataType: 'monthlyReport'
    }
  },
  computed: {},
  watch: {},
  created() {
    // this.pageDataInit()
  },
  mounted() {},
  methods: {
    /* 页面数据初始化*/
    // pageDataInit() {
    //   this.query()
    // },
    /* 查询表格数据*/
    // async query() {
    //   try {
    //     this.isRequesting = true
    //     this.advanceOptionDrawer = false
    //     const res = await quarterPriceGRPageList({
    //       pageSize: this.pageSize,
    //       pageNumber: this.pageNumber,
    //       pageCondition: this.queryForm
    //     })
    //     this.tableData = res.data.list
    //     this.total = res.data.total
    //   } catch (error) {
    //     console.log(error)
    //   } finally {
    //     this.isRequesting = false
    //   }
    // },
    handleChange(data) {
      console.log(data)
      this.selectVal = data
    },
    async reportQuery() {
      if (this.dataType === 'monthlyReport') {
        try {
          if (this.yearData === '') {
            this.$message.error('选择所要查询的时间')
            return
          }
          console.log(this.yearData.getFullYear())
          console.log(this.selectVal)
          this.isRequesting = true
          const res = await reportMonth({
            year: this.yearData.getFullYear(),
            month: this.selectVal
          })
          this.tableData = res.data.list
          this.total = res.data.total
        } catch (error) {
          console.log(error)
        } finally {
          this.isRequesting = false
        }
      } else {
        try {
          if (this.yearData === '') {
            this.$message.error('选择所要查询的时间')
            return
          }
          console.log(this.yearData)
          console.log(this.quarterlyData)
          this.isRequesting = true
          const res = await reportQuarter({
            year: this.yearData.getFullYear(),
            quarter: this.quarterlyData
            // pageCondition: this.queryForm
          })
          this.tableData = res.data.list
          this.total = res.data.total
        } catch (error) {
          console.log(error)
        } finally {
          this.isRequesting = false
        }
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.func-top {
  /deep/ .el-input__inner {
    height: 32px;
    line-height: 32px;
  }
  .btn-right {
    margin-top: 6px;
  }
}

.base-table {
  margin-top: 2px;
}
</style>
